const path = require("path");

module.exports = (config) => {
  config.module
    .rule("fonts")
    .use("url-loader")
    .loader("url-loader")
    .options({
      limit: 4096,
      fallback: {
        loader: "file-loader",
        options: {
          name: "static/fonts/[name].[ext]"
        }
      }
    })
    .end();
  config.module
    .rule("images")
    .use("url-loader")
    .loader("url-loader")
    .options({
      limit: 20480,
      fallback: {
        loader: "file-loader",
        options: {
          name: "static/img/[name].[ext]"
        }
      }
    })
    .end();
  // 配置svg
  config.module.rule("svg").exclude.add(path.resolve("src/icons")).end();
  config.module
    .rule("icons")
    .test(/\.svg$/)
    .include.add(path.resolve("src/icons"))
    .end()
    .use("svg-sprite-loader")
    .loader("svg-sprite-loader")
    .options({
      symbolId: "icon-[name]"
    })
    .end();

  // web worker
  config.module
    .rule("worker")
    .test(/\.worker.js$/)
    .use("worker-loader")
    .loader("worker-loader")
    .options({ inline: "fallback" })
    .end();
  config.module.rule("js").exclude.add(/\.worker\.js$/);

  config.module
    .rule("customerRule")
    .include.add(path.resolve(__dirname, "../projects"))
    .end()
    .test(/\.vue$|\.js$/)
    .use("customer-loader")
    .loader("customer-loader")
    .options({
      authors: ["yhlin9"]
    })
    .end();

  // vue xss攻击
  config.module
    .rule("vue")
    .use("vue-loader")
    .loader("vue-loader")
    .tap((options) => {
      // 消除标签之间的空格
      options.compilerOptions.preserveWhitespace = true;
      // 修改v-html指令，加上防xss攻击
      options.compilerOptions.directives = {
        html(node, directiveMeta) {
          (node.props || (node.props = [])).push({
            name: "innerHTML",
            value: `xss(_s(${directiveMeta.value}))`
          });
        }
      };
      return options;
    })
    .end();
};
